<template>
    <div class="container">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="承运商" prop="carrierCode">
          <el-select v-model="form.carrierCode" placeholder="请选择承运商">
            <el-option
              v-for="item in carrierLists"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="isDisable" @click="submitForm">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import { carrierList, changeCarrier } from '@/api/outStorage'
export default {
  name: 'ChangeCarrier',
  props:{
    changeCarrierData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    visible: [ Boolean ]
  },
  data(){
    return {
        carrierLists: [],
        form: {
          carrierCode: ''
        },
        rules: {
          carrierCode: { required: true, message: '请选择承运商' }
        },
        isDisable: false
    }
  },
  created(){
    this.form.deliveryCodes = this.changeCarrierData.deliveryCodes
    carrierList(this.changeCarrierData.shipmentCode).then(res => this.carrierLists = res.data.records)
  },
  methods:{
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.isDisable = true
            changeCarrier(this.form).then(res => {
              this.$message.success(res.msg)
              this.$emit('refresh')
              this.$emit('update:visible', false)
            }).finally(()=> this.isDisable = false)
          }
        })
      }
  },
}
</script>
